<template>
  <ve-liquidfill
    :data="chartData"
    height="100%"
    :settings="chartSettings"
  />
</template>

<script>
import { liquidFill } from '@/api/axiosHttp'

function getColor (value) {
  return value > 0 && value <= 0.5 ? 'rgba(97,216,0,.7)'
    : value > 0.5 && value <= 0.8 ? 'rgba(204,178,26,.7)'
      : value > 0.8 ? 'rgba(241,47,28,.7)' : '#c7c7cb'
}

export default {
  data () {
    return {
      percent: 0

    }
  },
  computed: {
    chartData () {
      return {
        columns: ['title', 'percent'],
        rows: [{
          title: 'rate',
          percent: this.percent
        }]
      }
    },
    chartSettings () {
      return {
        seriesMap: {
          rate: {
            radius: '80%',
            label: {
              formatter (v) {
                return (v.data.value * 100).toFixed(2) + '%'
              },
              textStyle: {
                fontSize: 36,
                color: '#999'
              }
            },
            outline: {
              itemStyle: {
                borderColor: '#aaa4a4',
                borderWidth: 1,
                color: 'none',
                shadowBlur: 0,
                shadowColor: '#fff'
              },
              borderDistance: 0

            },
            backgroundStyle: {
              color: '#fff'
            },
            itemStyle: {
              shadowBlur: 0,
              shadowColor: '#fff'
            },
            amplitude: 8,
            color: [getColor(this.percent)]
          }
        }
      }
    }

  },
  created () {
    liquidFill().then(data => {
      this.percent = data.percent
    })
  }
}
</script>
